<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        !window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
    </script>
    <script src="js/public.js"></script>
    <title>云中宝</title>
</head>

<body>
<div class="wrapper">
<div class="header">
    <ul class='clearfix'>
        <li class="header_btn_wrapper float_l"><a href="javascript:goHistory()" class="header_btn"><img src="images/return_icon.png" alt=""></a></li>
        <li class="header_btn_wrapper float_r"><a href="javascript:goHome()" class="header_btn"><img src="images/home_icon.png" alt=""></a></li>
        <li class="header_title_wrapper">个人基本信息</li>
    </ul> 
</div>
<div class="main">  
    <form action="" class="intro_form">
    <div class="rows content_wrapper intro bg_white">
        <div class="cols12">
           <div class="intro_head">
               <img src="images/head/2.jpg" width="100%" alt="">               
           </div>
           <p class="intro_txt font_999">更换个人头像</p>
        </div>
    </div>
    <div class="content_wrapper pd10">
        <div class="form_item_group">
            <div class="form_item intro_name">
                <span class="form_label" for="">姓名：</span>
                <input class="form_input w_10" id="name" name="name" type="text" value="王小敏">       
            </div>
            <div class="form_item intro_sex">
                <span class="form_label" for="">性别：</span></span>
                <div class="form_input_wrapper w_10">
                    <select name="" id="sex" class="form_select w_10">
                        <option value="男" >男</option>
                        <option value="女" >女</option>
                    </select> 
                </div>          
            </div>
            <div class="form_item intro_id">
                <span class="form_label" for="">身份证号：</span></span>
                <input class="form_input w_10" type="text" value='2301198910230987'>       
            </div>
        </div>
        <div class='title'>现居住地址：</div>
        <div class="form_item_group">
            <div class="form_item intro_livearea">
                <div class="form_input_wrapper w_5">
                    <div class="intro_liveProvince" style="border-right:1px solid #ccc">
                        <select name="" id="liveProvince" class="form_select w_10">
                            <option value="" >-省份-</option>
                        </select> 
                    </div>
                </div>
                <div class="form_input_wrapper w_5">
                    <div class="intro_liveCity">
                        <select name="" id="liveCity" class="form_select w_10">
                            <option value="" >-城市-</option>
                        </select> 
                    </div>
                </div>         
            </div>
            <div class="form_item intro_liveAddress">
                <div class="form_input_wrapper w_10">
                    <textarea name="" id="" class="form_textarea w_10">五棵松体育馆</textarea>
                </div>        
            </div>    
        </div>
        <div class="">
            <div class="form_item">
               <label class="form_radio" style="font-size:14px">
                   <input type="radio" name='samelive' value="no" checked>不同于现在的居住地址   
                   <i></i>    
               </label>
            </div>    
            <div class="form_item">
               <label class="form_radio" style="font-size:14px">
                   <input type="radio" name='samelive' value="yes">与现在的居住地址相同  
                   <i></i>    
               </label>
            </div>    
        </div>
        <div class='title'>户籍地址：</div>
        <div class="form_item_group">
            <div class="form_item intro_domicilearea">
                <div class="form_input_wrapper w_5">
                    <div class="intro_domicileProvince" style="border-right:1px solid #ccc">
                        <select name="" id="domicileProvince" class="form_select w_10">
                            <option value="" >-省份-</option>
                        </select> 
                    </div>
                </div>
                <div class="form_input_wrapper w_5">
                    <div class="intro_domicileCity">
                        <select name="" id="domicileCity" class="form_select w_10">
                            <option value="" >-城市-</option>
                        </select> 
                    </div>
                </div>         
            </div>
            <div class="form_item intro_domicileAddress">
                <div class="form_input_wrapper w_10">
                    <textarea name="" id="" class="form_textarea w_10">果戈里大街</textarea>
                </div>        
            </div>    
        </div>
        <div class="form_item_group">
            <div class="form_item intro_phone">
                <span class="form_label" for="">手机：</span>
                <input class="form_input w_10" id="name" name="name" type="text" value="15812345678">       
            </div>
            <div class="form_item intro_email">
                <span class="form_label" for="">电子邮箱：</span></span>
                <input class="form_input w_10" type="text" value='15812345678@163.com'>       
            </div>
            <div class="form_item intro_spe">
                <span class="form_label" for="">紧急联系人：</span></span>
                <input class="form_input w_10" type="text" value='15812345678@163.com'>       
            </div>
            <div class="form_item intro_email">
                <span class="form_label" for="">电子邮箱：</span></span>
                <input class="form_input w_10" type="text" value='李四'>       
            </div>
            <div class="form_item intro_spe_phone">
                <span class="form_label" for="">联系人电话：</span></span>
                <input class="form_input w_10" type="text" value='15112345678'>       
            </div>
        </div>
        <div class="form_item">
            <a class="btn btn_lg bg_orange w_10" href="javascript:goHistory()">确认</a>        
        </div>        
    </div> 
    </form>
    <div class="select_head pd10">
        <div class="rows">
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/1.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/2.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/3.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/4.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/5.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/6.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/7.jpg" alt="">
                </div> 
            </div>
            <div class="cols3">
                <div class="head_elm">
                    <img src="images/head/8.jpg" alt="">
                </div> 
            </div>

        </div>
        <div class="intro_btn_group">
            <a href="javascript:void(0)" class="btn btn_lg head_select_ok">确 定</a>    
        </div>
        
    </div>
    
</div> 
</div>
<div class="footer">
    <ul class="toolbar">
        <li class="account active"><a href="javascript:void(0)"><p>我的账户</p></a></li>
        <li class="transact"><a href="javascript:void(0)"><p>我要办理</p></a></li>
        <li class="info"><a href="javascript:void(0)"><p>服务信息</p></a></li>
        <li class="setting"><a href="javascript:void(0)"><p>个人设置</p></a></li>
    </ul>
</div>
</div>
<script src="js/city.js"></script>
<script type="text/javascript">
$(function(){    

window.check=function(){
}
var h = $(window).height();
for(var i=0,len=$('.head_elm').length;i<len;i++){
    var _src = $($('.head_elm img')[i]).attr('src')
    var _accSrc =  $('.intro_head img').attr('src');
    if(_src == _accSrc){
        $($('.head_elm')[i]).addClass('active')
    }
}
$('.select_head').css('height',h-218+'px')
$('.intro_head').bind('click',function(){
    $('.select_head').hasClass('active')?$('.select_head').removeClass('active'):$('.select_head').addClass('active');
})
$('.head_elm').bind('click',function(){
    if($(this).hasClass('active')){
//        $(this).removeClass('active')
    }else{
        $(this).addClass('active').parent().siblings('div').find('.head_elm').removeClass('active');
    }
})
$('.head_select_ok').bind('click',function(){
    var _parent = $(this).parent().parent();
    var _src = _parent.find('.head_elm.active img').attr('src');
    _parent.removeClass('active')
    $('.intro_head img').attr('src',_src)
})
//select

var formInfo={
    name:'张三',
    sex:'女',
    id:'2301198910230987',
    liveProvince:'北京',
    liveCity:'海淀区',
    address:'五棵松体育馆',
    domicileProvince:'黑龙江',
    domicileCity:'哈尔滨市',
    domicileaddress:'果戈里大街',
    phone:'15812345678',
    email:'15812345678@163.com',
    spe:'李四',
    spePhone:'15112345678',
    samelive:false
} 
var liveProvince = document.getElementById('liveProvince') 
var liveCity = document.getElementById('liveCity')
var domicileProvince = document.getElementById('domicileProvince') 
var domicileCity = document.getElementById('domicileCity') 
addprovince(liveProvince)
addprovince(domicileProvince)
liveProvince.onchange=function(){
    formInfo.liveProvince = $('.intro_liveProvince').find('select').val();
    selectchange(this,liveCity)
    formInfo.liveCity = $('.intro_liveCity').find('select').val();
    if(formInfo.samelive){
        $('.intro_domicileProvince').find('select').val(formInfo.liveProvince)
        domicileProvince.onchange();
        $('.intro_domicileCity').find('select').val(formInfo.liveCity)
        var _address = $('.intro_liveAddress').find('textarea').val()
        $('.intro_domicileAddress').find('textarea').val(_address)
    }
}
liveCity.onchange=function(){
    formInfo.liveCity = $('.intro_liveCity').find('select').val();
    if(formInfo.samelive){
        $('.intro_domicileCity').find('select').val(formInfo.liveCity)
    }
}
domicileProvince.onchange=function(){
    formInfo.domicileProvince = $('.intro_domicileProvince').find('select').val();
    selectchange(this,domicileCity)
    formInfo.domicileCity = $('.intro_domicileCity').find('select').val();
    if(formInfo.samelive){
        if($(this).val() != $('.intro_liveProvince').find('select').val()){
            $('input[name="samelive"][value="no"]').prop("checked",true)
            formInfo.samelive = false;
        }
    }
}
domicileCity.onchange=function(){ 
    formInfo.domicileCity = $('.intro_domicileCity').find('select').val();
    if(formInfo.samelive){
        if($(this).val() != $('.intro_liveCity').find('select').val()){
            $('input[name="samelive"][value="no"]').prop("checked",true)
            formInfo.samelive = false;
        }
    }
}
function provinceInit(){
    $('.intro_liveProvince').find('select').val(formInfo.liveProvince)//居住省    
    selectchange(liveProvince,liveCity)//居住省-市联动
    $('.intro_liveCity').find('select').val(formInfo.liveCity)//居住市
    
    $('.intro_domicileProvince').find('select').val(formInfo.domicileProvince)//户籍省
    selectchange(domicileProvince,domicileCity)//户籍省-市联动
    $('.intro_domicileCity').find('select').val(formInfo.domicileCity)//户籍市
}
provinceInit()
$('input[name="samelive"]').bind("change",function(){
    if($(this).val() == 'no'){
        formInfo.samelive = false;
        $('.intro_domicileProvince').find('select').val('北京')//户籍省
        selectchange(domicileProvince,domicileCity)//户籍省-市联动
        $('.intro_domicileAddress').find('textarea').val('')
    }else if($(this).val() == 'yes'){
        formInfo.samelive = true;
        formInfo.domicileProvince = formInfo.liveProvince;
        formInfo.domicileCity = formInfo.liveCity;
        var _address = $('.intro_liveAddress').find('textarea').val()
        $('.intro_domicileAddress').find('textarea').val(_address)
        provinceInit()
    }
})
$('.intro_liveAddress').find('textarea').bind('input',function(){
    if(formInfo.samelive){
        $('.intro_domicileAddress').find('textarea').val($(this).val())
    }
})
$('.intro_domicileAddress').find('textarea').bind('input',function(){
    if(formInfo.samelive){
        var _address = $('.intro_liveAddress').find('textarea').val()
        if( _address != $(this).val()){
            $('input[name="samelive"][value="no"]').prop("checked",true)
            formInfo.samelive = false;
        }
    }
})
})
</script>   
</body>
</html>